<template>
  <div class="loginpage">
    <div class="btnInport">
      <!-- action="http://localhost:8004/exam/uploadSingle" -->

      <el-row :gutter="24">
        <el-col :span="14">
          <el-upload
            class="upload-demo"
            id="fileUpName"
            name="fileUpName"
            action="http://localhost:8004/exam/uploadSingle"
            :on-success="handsuccess"
            :on-preview="handlePreview"
            :limit="1"
          >
            <el-button size="small" type="primary">选择文件</el-button>
          </el-upload>
        </el-col>

        <el-col :span="10">
          <el-button size="small" type="danger" @click="clearTable"
            >清空监考端数据</el-button
          >
        </el-col>
      </el-row>
    </div>

    <el-card class="box-card">
      <div class="title">分布式考试系统</div>

      <div class="login-form">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          @keyup.enter.native="doLogin()"
          label-width="80px"
        >
          <el-form-item prop="userName">
            <el-input
              v-model="form.userName"
              placeholder="用户名"
              prefix-icon="el-icon-user-solid"
            ></el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              v-model="form.password"
              type="password"
              placeholder="密码"
              prefix-icon="el-icon-key"
            ></el-input>
          </el-form-item>

          <el-form-item prop="code">
            <el-row :gutter="20">
              <el-col :span="14">
                <el-input v-model="form.code" placeholder="验证码"> </el-input>
              </el-col>
              <el-col :span="10" class="login-captcha">
                <img
                  :src="imgUrl"
                  @click="changeCode()"
                  title="换一张"
                  alt="换一张"
                />
              </el-col>
            </el-row>
            <el-checkbox v-model="form.checked" style="margin-top: 7px"
              >一周内自动登录</el-checkbox
            >
            <span class="forget">忘记密码?</span>
          </el-form-item>

          <el-form-item>
            <el-button @click="doLogin" type="primary" style="width: 100%"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      key: null,
      form: {
        userName: "admin",
        password: "123456",
        code: "",
        checked: false,
      },
      imgUrl: "",
      rules: {
        userName: [
          { required: true, message: "帐号不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],

        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
    };
  },

  mounted() {
    this.changeCode();
  },

  methods: {
    handsuccess(files) {
      console.log("files", files);
      this.$message.success("文件上传成功");
    },
    handlePreview(file) {
      console.log(file);
    },

    changeCode() {
      this.key = new Date().getTime();
      this.imgUrl = this.$http.httpUrl("/api/image?key=" + this.key);
    },

    // 提交表单
    doLogin() {
      let that = this;
      that.$refs["form"].validate(function (valid, rules) {
        if (valid) {
          that.form.key = that.key;
          that.axios
            .post(that.$http.httpUrl("/system/login"), that.form)
            .then(function (response) {
              if (response.data.code === 1) {
                that.$notify({
                  message: response.data.message,
                  type: "success",
                });
                localStorage.setItem(
                  "token",
                  response.data.data.userInfo.token
                );
                localStorage.setItem(
                  "userInfo",
                  JSON.stringify(response.data.data.userInfo)
                );
                setTimeout(function () {
                  that.$router.push("home");
                }, 2000);
              } else if (response.data.code === 2) {
                that.$notify({
                  message: response.data.message,
                  type: "error",
                });
                that.changeCode();
              }
            });
        } else {
          let message = "";
          for (let rule in rules) {
            message = rules[rule][0].message;
            if (message) {
              break;
            }
          }
          that.$message({
            type: "error",
            message: message,
          });
          return false;
        }
      });
    },

    //清空
    clearTable() {
      this.$confirm("此操作将永久清空数据库, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios.get(this.$http.httpUrl(`/clearTable`))
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="less" scoped>
.forget {
  float: right;
  margin-top: 7px;
  cursor: pointer;
}
.forget:hover {
  color: #409eff;
}
.title {
  position: absolute;
  left: 25%;
  top: 12%;
  color: #409eff;
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
}

.box-card {
  height: 410px;
  width: 420px;
  position: relative;
  top: 20%;
  left: 36%;
}

.btnInport {
  position: relative;
  top: 18%;
  left: 36%;
  width: 420px;

  // background-color: #fff;
}

.login-form {
  width: 420px;
  position: absolute;
  top: 30%;
  right: 10%;
}
.loginpage {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background: url("/static/img/login-bg.jpg");
  background-size: 100% 100%; //   background: url('/static/image/loginng.gif') no-repeat;
  background-position: center;
  position: fixed;
}
</style>
